<template>
  <div class="call-center-model">
    <el-row type="flex" justify="center">
      <el-form
        class="serach-form"
        ref="searchForm"
        :model="searchForm"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item>
          <el-select clearable @change="search" v-model="searchForm.orgId" placeholder="请选择业主单位">
            <el-option
              v-for="item in orgList"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入姓名/电话号码"
            v-model="searchForm.name"
            @keyup.enter.native="search"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <ul v-loading="loading" class="call-person-list">
      <li v-for="(item, i) in personList" class="call-person-item" :key="i">
        <img class="user-head-img" :src="item.headUrl || defaultUserHead" />
        <div class="user-ifno">
          <p>
            <span>姓名</span>
            {{ item.name }}
          </p>
          <p>
            <span>职位</span>
            {{ item.roleName }}
          </p>
          <p>
            <span>电话</span>
            {{ item.phone }}
          </p>
          <p>
            <span>所在组织/单位</span>
            {{ item.organizationName }}
          </p>
        </div>
        <i class="phone-icon iconfont icon-bohao" @click="callPerson(item)"></i>
      </li>
      <div v-if="!loading && personList.length === 0" class="no-data">
        <p class="no-data-text">暂无数据</p>
      </div>
    </ul>
    <!-- 软件盘 -->
    <el-drawer
      title="软键盘"
      :append-to-body="true"
      :before-close="handleClose"
      direction="btt"
      :custom-class="'number-desk-drawer'"
      :visible.sync="innerDrawer"
    >
      <div v-if="innerDrawer">
        <el-row>
          <el-col :span="12">
            <ul class="number-btn-list">
              <li class="number-btn-item" @click="clickNumberDesk('1')">1</li>
              <li class="number-btn-item" @click="clickNumberDesk('2')">2</li>
              <li class="number-btn-item" @click="clickNumberDesk('3')">3</li>
              <li class="number-btn-item" @click="clickNumberDesk('4')">4</li>
              <li class="number-btn-item" @click="clickNumberDesk('5')">5</li>
              <li class="number-btn-item" @click="clickNumberDesk('6')">6</li>
              <li class="number-btn-item" @click="clickNumberDesk('7')">7</li>
              <li class="number-btn-item" @click="clickNumberDesk('8')">8</li>
              <li class="number-btn-item" @click="clickNumberDesk('9')">9</li>
              <li class="number-btn-item" @click="clickNumberDesk('*')">*</li>
              <li class="number-btn-item" @click="clickNumberDesk('0')">0</li>
              <li class="number-btn-item" @click="clickNumberDesk('#')">#</li>
            </ul>
          </el-col>
          <el-col :span="12" class="number-desk-right-content">
            <el-input
              ref="inputCallNumber"
              class="call-number-input"
              placeholder
              autofocus
              v-model="callNumber"
              clearable
            ></el-input>
            <el-button class="call-btn" @click="callPerson">立即拨打</el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <el-button
      class="number-disk-btn"
      type="primary"
      title="号码盘"
      icon="el-icon-s-grid"
      circle
      @click="handleOpen"
    ></el-button>
  </div>
</template>
<script>
import { callPhone } from "@/api/callCenter";
import { getOrgList, getPInfo } from "@/api/org";

export default {
  name: "CallCenter",
  props: ["parames"],
  data() {
    return {
      loading: true,
      innerDrawer: false,
      defaultUserHead: require("../../../assets/images/default/userHead.png"),
      orgList: [],
      searchForm: {
        orgId: "",
        name: "",
      },
      personList: [],
      callType: "", // 呼叫类型 1、警情，2、重大问题，3、高危信号
      callNumber: "", // 拨打的号码
    };
  },
  created() {
    let obj = this.$route.params

    if (obj && obj.orgId) {
      this.searchForm.orgId = obj.orgId || "";
      this.callType = obj.type || "";
      if (obj.type) {
        this.searchForm.name = "值班电话";
      } else {
        this.searchForm.name = obj.name || "";
      }
    }

    this.getOrgListData();
    this.getPersonList();
  },
  methods: {
    // 获取业主单位信息
    getOrgListData() {
      let that = this;

      getOrgList({
        queryType: 0,
      }).then((res) => {
        if ((res.status = 200)) {
          that.orgList = res.data;
        }
      });
    },
    // 获取人员信息
    getPersonList() {
      let that = this;

      getPInfo({
        organizationId: that.searchForm.orgId,
        name: this.searchForm.name,
      }).then((res) => {
        that.personList = res.data;
        that.loading = false;
      });
    },
    search() {
      this.getPersonList();
    },
    // 呼叫
    callPerson(obj) {
      let that = this;
      let row=this.parames.row||{}
      let parames = {
        phone: obj && obj.phone ? obj.phone : that.callNumber,
        objBizId:row.id||'',
        objType:this.parames.type||''
      };

      if (parames.phone.trim()) {
        if (that.callType) {
          parames.objType = that.callType;
        }
        if (obj.name) {
          parames.customerUserName = obj.name;
        }
        if (obj.organizationId) {
          parames.customerOrgId = obj.organizationId;
        }

        console.log(parames)
        // return

        callPhone(parames).then((res) => {
          if (res.status === 200) {
            that.$message({
              message: "呼叫成功！",
              type: "success",
            });
          } else {
            that.$message.error(res.info);
          }
        });
      } else {
        that.$message({
          message: "请输入电话号码！",
          type: "warning",
        });
      }
    },
    handleOpen() {
      this.callNumber = "";
      this.innerDrawer = true;
      this.$nextTick(() => {
        this.$refs["inputCallNumber"].focus();
      });
    },
    handleClose() {
      this.innerDrawer = false;
    },
    // 点击号码盘
    clickNumberDesk(val) {
      let num = val;
      this.callNumber += String(num);
    },
  },
  watch: {
    parames(val) {
      let orgId = "";
      let name = "";
      let callType = "";

      this.loading = true;
      if (val && val.orgId) {
        orgId = val.orgId || "";
        callType = val.type || "";
        if (val.type) {
          name = "值班电话";
        } else {
          name = val.name || "";
        }
      }

      this.searchForm.orgId = orgId;
      this.searchForm.name = name;
      this.callType = callType;
      this.getPersonList();
    },
  },
};
</script>
<style lang="scss">
.call-center-model {
  position: relative;
  padding: 0 20px;
  height: 100%;
  .serach-form {
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
    }
  }
  .call-person-list {
    margin-top: 15px;
    height: 720px;
    overflow: auto;
    .call-person-item {
      display: flex;
      padding: 23px 0;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      .user-head-img {
        margin-right: 20px;
        width: 86px;
        height: 86px;
      }
      .user-ifno {
        width: calc(100% - 200px);
        line-height: 24px;
        span {
          margin-right: 20px;
          color: #666666;
        }
      }
      .phone-icon {
        width: 80px;
        font-size: 48px;
        text-align: center;
        color: #4c6cd7;
        cursor: pointer;
        &:hover {
          &::before {
            content: "\e707";
          }
        }
      }
    }
  }
  .number-disk-btn {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -20px;
    width: 60px;
    height: 60px;
    text-align: center;
    background-color: #4c6cd7;
    .el-icon-s-grid {
      font-size: 30px;
    }
  }
}
.el-dialog__wrapper,
.el-drawer__wrapper {
  .el-drawer__container {
    .number-desk-drawer {
      height: 300px !important;
      width: 30% !important;
      left: 70% !important;
      .el-drawer__header {
        margin-bottom: 0;
        padding: 13px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #333;
        font-size: 18px;
      }
      .number-btn-list {
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 75%;
        list-style: none;
        .number-btn-item {
          margin-bottom: 10px;
          width: calc(33.33% - 5px);
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          background-color: rgba(191, 191, 191, 0.2);
          color: #666;
          cursor: pointer;
          &:hover {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
      .number-desk-right-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 240px;
        .call-number-input {
          margin-left: 10%;
          width: 80%;
          .el-input__inner {
            border: none;
            font-size: 22px;
            color: #141414;
          }
        }
        .call-btn {
          display: block;
          margin: 0 auto;
          margin-top: 35px;
          padding: 12px 40px;
          border: 1px solid rgba(76, 108, 215, 1);
          border-radius: 19px;
          color: #4c6cd7;
          font-size: 16px;
          background: rgba(246, 247, 251, 1);
          cursor: pointer;
          .el-icon-phone-outline {
            font-size: 36px;
          }
        }
      }
    }
  }
}
</style>
